<template>
    <div class="myBox">
        <div class="topNav">
            <div class="author-area">
                <van-image round src="https://img.yzcdn.cn/vant/cat.jpeg" />
                <div class="author-name">
                    <div>黑马头条开发者</div>
                    <div class="requireIdentify">申请认证</div>
                </div>
                <div class="today-read-time">
                    <van-icon class="bookIcon" name="label-o" size="24px" />
                    <div>
                        <div>今日阅读</div>
                        <div>5分钟</div>
                    </div>
                </div>
            </div>
            <div class="author-msg">
                <div class="active">
                    <div>8</div>
                    <div>动态</div>
                </div>
                <div class="care">
                    <div>66</div>
                    <div>关注</div>
                </div>
                <div class="fans">
                    <div>233</div>
                    <div>粉丝</div>
                </div>
            </div>
        </div>
        <div class="btnArea">
            <div class="sc">
                <van-icon name="star-o" size="23" color="#eb5253" />
                <div>收藏</div>
            </div>
            <div class="sc">
                <van-icon name="clock-o" size="23" color="#ff9d1d" />
                <div>历史</div>
            </div>
            <div class="sc">
                <van-icon name="idcard" size="23" color="#678eff" />
                <div>作品</div>
            </div>
        </div>
        <div class="mainArea">
            <van-cell-group>
                <van-cell title="信息通知" is-link />
                <van-cell title="实名认证" is-link />
            </van-cell-group>
            <van-cell-group class="secendGroup">
                <van-cell title="用户反馈" is-link />
                <van-cell title="小智同学" is-link />
                <van-cell title="系统设置" is-link />
            </van-cell-group>
        </div>
    </div>
</template>

<script>
    export default {

    }
</script>

<style lang="scss">
    .myBox {
        height: 100vh;
        background-color: #f5f7f9;

        .topNav {
            height: 200px;
            background-color: #3296fa;

            .author-area {
                display: flex;
                align-items: center;
                font-size: 15px;
                color: #fff;
                padding-left: 20px;
                padding-top: 40px;

                .van-image {
                    img {
                        width: 66px;
                        height: 66px;
                        border: 1px solid #fff;
                    }
                }

                .author-name {
                    height: 66px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-evenly;
                    margin-left: 15px;

                    .requireIdentify {
                        background-color: #fff;
                        color: #3296fa;
                        width: 58px;
                        height: 16px;
                        font-size: 10px;
                        border-radius: 8px;
                        text-align: center;
                        line-height: 16px;
                    }
                }

                .today-read-time {
                    .bookIcon {
                        margin-right: 5px;
                    }

                    display: flex;
                    align-items: center;
                    width: 90px;
                    height: 40px;
                    margin-left: auto;
                    background-color: #3981c9;
                    border-top-left-radius: 20px;
                    border-bottom-left-radius: 20px;
                    font-size: 12px;
                    padding-left: 10px;
                }
            }

            .author-msg {
                display: flex;
                align-items: center;
                color: #fff;
                font-size: 16px;
                margin-top: 30px;

                &>div {
                    width: 33%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
            }
        }

        .btnArea {
            height: 71px;
            margin-bottom: 10px;
            background-color: #fff;
            display: flex;
            align-items: center;

            &>div {
                width: 33%;
                margin: 0px auto;
                display: flex;
                flex-direction: column;
                align-items: center;

                &>div {
                    font-size: 14px;
                    margin-top: 8px;
                }
            }
        }

        .mainArea {
            .secendGroup {
                margin-top: 5px;
            }
        }
    }
</style>